import React from 'react';
import style from '../style/info.module.scss'
import { exhibitInfo } from '../http/interface'
import Swiper from 'swiper'
import { Slider} from 'antd-mobile';
import handle from '../image/handle.png'



class Info extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            exhibition_id: '',
            imglist: [],
            content: '',
            min: 0,
            max: 100
        }
    }
    componentDidMount() {
        let exhibition_id = this.props.match.params.id
        this.setState({
            exhibition_id: exhibition_id
        },() => {
            this.getInfo()
        })
        let mySwiper = new Swiper('.swiper-container', {
            slidesPerView : 3,
            spaceBetween : 20,
        })
    }
    async getInfo() {
        let vm = this;
        try {
            let exhibit_id = this.props.match.params.id;
            let data = {
                exhibit_id: exhibit_id
            }
            const res = await exhibitInfo(data)
            if (res.status == 1) {
                console.log(res)
                this.setState({
                    imglist: res.data.exhibit_imgs,
                    content: res.data.content
                })
            }
        }catch(err) {
            console.log(err)
        }
    }
    setCurTime() {

    }
    render() {
        return (
            <div className={style.info}>
                <div className={style.banner}>
                    <div className={`swiper-container`}>
                        <div className={`swiper-wrapper`}>
                            {
                                this.state.imglist.map((item,index)=>{
                                    return(                                    
                                        <div key={index} ref="myli" className={`swiper-slide`}>
                                            <img className={style.image} src={item}></img>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <Slider
                        style={{ zIndex: 10 }}
                        defaultValue={0}
                        min={this.state.min}
                        max={this.state.max}
                        step= {0.01}
                        handleStyle={{
                            height: '18px',
                            width: '18px',
                            marginLeft: '-9px',
                            marginTop: '-7.5px',
                            backgroundColor: 'rgba(76, 112, 58, 1)',
                            border: '4px solid rgba(76, 112, 58, 0.5)',
                            zIndex: 11,
                            backgroundClip: 'padding-box'
                        }}
                        trackStyle={{
                            backgroundColor: '#4C703A',
                            height: '3px',
                        }}
                        railStyle={{
                            backgroundColor: '#000000',
                            opacity: 0.3,
                            height: '3px',
                        }}
                        onAfterChange={() => {this.setCurTime()}}
                    />
                </div>
                <div className={style.tools}>
                    <div className={style.curtime}>
                        00:30
                    </div>
                    <div className={style.control}>
                        <div className={style.previous}>

                        </div>
                        <div className={style.playBtn}>

                        </div>
                        <div className={style.next}>

                        </div>
                    </div>
                    <div className={style.maxTime}>
                        02:20
                    </div>
                </div>
                <div className={style.content}>
                    <h3 className={style.title}>010-汉字艺术墙</h3>
                    <p className={style.artical} dangerouslySetInnerHTML={{__html: this.state.content}}>

                    </p>
                </div>
            </div>
        )
    }
}



export default Info;